<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>银行系统（软件工程作业）</title>
    <link rel="icon" href="favicon.png" type="image/png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../lib/bootstrap.min.css">
    <link rel="stylesheet" href="../css/dashboard.css">
</head>
<body>

<div id="vue_div">
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">导航条</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#" @click="r_index">银行存取系统（软件工程作业）</a>

            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#" @click="r_index">主页</a></li>
                    <li><a href="#" @click="r_goto(11)">个人中心</a></li>
                    <li><a href="#" @click="r_goto(12)">线上活动</a></li>
                    <li><a href="#" > 201593099   软日1505 黎东来  </a></li>
                </ul>
                <form class="navbar-form navbar-right">

                    <input type="text" class="form-control" placeholder="查询...">
                </form>
            </div>
        </div>
    </nav>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar" v-show="page.val===1" style="display: none">
                <ul class="nav nav-sidebar">
                    <li class="active" id="b_0"><a href="#" @click="r_index">总览 <span class="sr-only">(current)</span></a></li>
                    <li id="b_1"><a href="#" @click="r_goto(1)">账户转入</a></li>
                    <li id="b_2"><a href="#" @click="r_goto(2)">账户取出</a></li>
                    <li id="b_3"><a href="#" @click="r_goto(3)">账户转账</a></li>
                </ul>
                <ul class="nav nav-sidebar">
                    <li id="b_4"><a href="#" @click="r_goto(4)">信用卡办理</a></li>
                    <li id="b_5"><a href="#" @click="r_goto(5)">信用卡流水</a></li>
                    <li id="b_6"><a href="#" @click="r_goto(6)">信用卡缴费</a></li>
                    <li id="b_7"><a href="#" @click="r_goto(7)">信用卡生活</a></li>
                </ul>
                <ul class="nav nav-sidebar">
                    <li id="b_8"><a href="#" @click="r_goto(8)">个人信息</a></li>
                    <li id="b_9"><a href="#" @click="r_goto(9)">全部账单</a></li>
                    <li id="b_10"><a href="#" @click="r_goto(10)">信息通知</a></li>
                </ul>
            </div>
            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" v-show="page.name==='index'" style="display:none ">
                <h1 class="page-header">业务总览</h1>

                <div class="row placeholders">
                    <div class="col-xs-6 col-sm-4 col-sm-offset-1 placeholder">
                        <img src="" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
                        <h4>账本收入/支出</h4>
                        <span class="text-muted">掌控您的收支平衡</span>
                    </div>
                    <div class="col-xs-6 col-sm-4 col-sm-offset-1 placeholder">
                        <img src="" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail" >
                        <h4>信用收入/支出</h4>
                        <span class="text-muted">掌控您的信用水平</span>
                    </div>

                </div>

                <h2 class="sub-header">相关业务</h2>
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                        <tr>
                            <th> </th>
                            <th>业务类型</th>
                            <th>具体名称</th>
                            <th>当前息率</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr @click="r_goto(1)">
                            <td>1</td>
                            <td>定期活期业务</td>
                            <td>存款</td>
                            <td>{{page.ins}}</td>
                        </tr>
                        <tr @click="r_goto(2)">
                            <td>2</td>
                            <td>定期活期业务</td>
                            <td>取款</td>
                            <td>{{page.ins}}</td>
                        </tr>
                        <tr @click="r_goto(3)">
                            <td>3</td>
                            <td>定期活期业务</td>
                            <td>转账</td>
                            <td></td>
                        </tr>
                        <tr @click="r_goto(4)">
                            <td>4</td>
                            <td>信用卡业务</td>
                            <td>办理</td>
                            <td></td>
                        </tr>
                        <tr @click="r_goto(5)">
                            <td>5</td>
                            <td>信用卡业务</td>
                            <td>流水查询</td>
                            <td></td>
                        </tr>
                        <tr @click="r_goto(6)">
                            <td>6</td>
                            <td>信用卡业务</td>
                            <td>缴费</td>
                            <td>{{page.ins2}}</td>
                        </tr>
                        <tr @click="r_goto(8)">
                            <td>7</td>
                            <td>信用卡业务</td>
                            <td>信用生活</td>
                            <td></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"
         v-show="page.name==='page1'||page.name==='page2'||page.name==='page3'" style="display:none ">
        <h1 class="page-header">定期/活期{{page.fun}}业务</h1>

        <div class="row placeholders">
            <div class="col-xs-12 col-sm-3 placeholder">
                <form>
                    <h4>卡号</h4><input type="text" class="form-control">
                    <br>
                    <h4>持卡人姓名</h4><input type="text" class="form-control">
                    <br>
                    <h4>持卡人手机</h4><input type="text" class="form-control"><button class="btn btn-block">获取验证码</button>
                    <br>
                    <h5>验证码</h5><input type="text" class="form-control">
                    <br>
                </form>
                <button class="btn btn-default"  @click="r_goto(101)">下一步</button>
            </div>
        </div>
    </div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"
         v-show="this.page.name==='page101'" style="display:none">
        <h1 class="page-header">定期/活期{{page.fun}}业务</h1>
        <div class="row placeholders">
            <div class="col-xs-12 col-sm-3 placeholder" v-show="this.page.fun==='存款'" style="display:none">
                <form>
                    <h4>存款单号码</h4><input type="text" class="form-control">
                    <br>
                    <h4>持卡人手机</h4><input type="text" class="form-control">
                    <button class="btn btn-block">获取验证码</button>
                    <br>
                    <h5>验证码</h5><input type="text" class="form-control">
                    <br>
                </form>
                <button class="btn btn-default" data-toggle="modal" data-target="#myModal">确认</button>

            </div>
            <div class="col-xs-12 col-sm-3 placeholder" v-show="this.page.fun==='取款'" style="display:none">
                <form >
                    <div class="form-group">
                        <label class="sr-only" for="exampleInputAmount">金额（人民币）</label>
                        <p>年化收益率：{{page.ins}}</p>
                        <div class="input-group">
                            <div class="input-group-addon">￥</div>
                            <input v-model="money" type="text" class="form-control" id="exampleInputAmount" placeholder="金额">
                            <div class="input-group-addon">.00</div>
                        </div>
                    </div>
                </form>
                <form>
                    <h4>持卡人手机</h4><input type="text" class="form-control">
                    <button class="btn btn-block">获取验证码</button>
                    <br>
                    <h5>验证码</h5><input type="text" class="form-control">
                    <br>
                </form>
                <button class="btn btn-default" data-toggle="modal" data-target="#myModal">取款</button>

            </div>
        </div>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">订单确认</h4>
                    </div>
                    <div class="modal-body">
                        <br><br><br>
                        <p>{{page.fun}}金额：{{money}}</p>
                        <p>年化收益率：{{page.ins}}</p>
                        <br><br><br>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" @click="r_index">确认{{page.fun}}</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" @click="r_index">确认并打印</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript" src="../../../lib/jquery.min.js"></script>
<script type="text/javascript" src="../../../lib/bootstrap.min.js"></script>
<script type="text/javascript" src="../../../lib/vue.min.js"></script>
<script>
    new Vue({
        el:'#vue_div',
        data:{
            page:{
                name:'index',
                val:1,
                fun:'存款',
                ins:'4.01%',
                ins2:'0.50%'
            },
            money:0,
        },
        methods:{
            r_index:function(){
                this.page.name='index';
                $("#b_0").addClass("active");
                this.page.val=1;
                for(var i=1;i<=10;i++){
                    var item="#b_"+i;
                    $(item).removeClass("active");
                }
            },
            r_goto:function(num){
                this.page.name="page"+num;
                if(num>10&&num<100){
                    this.page.val=2;
                }else if(num>100){
                    switch(this.page.fun){
                        case "存款":
                            num=1;
                            break;
                        case "取款":
                            num=2;
                            break;
                        case "转账":
                            num=3;
                            break;
                        default:
                            ;

                    }

                }else{
                    this.page.val=1;
                    switch(num){
                        case 1:
                            this.page.fun="存款";
                            num=1;
                            break;
                        case 2:
                            this.page.fun="取款";
                            num=2;
                            break;
                        case 3:
                            this.page.fun="转账";
                            num=3
                            break;
                        default:
                            ;
                    }
                }
                console.log(num);
                for(var i=0;i<=10;i++){
                    if(i==num) {
                        var item="#b_"+i;
                        $(item).addClass("active");
                        continue;
                    }
                    $("#b_"+i).removeClass("active");
                }
            },
        }
    })
</script>
</body>
</html>